<template>
  <div style="width: 100%; height: 100%" id="homePage">
    <div class="homeimg">
      <span class="home-title">欢迎使用IT共享治理系统！</span>
    </div>
    <!-- <div class="header">
      <div class="header__firstitem">
        <img class="header__firstitem__img" src="../asset/images/report.svg" alt="" />
        <div>
          <p class="header__firstitem__num">{{ reportCount }}</p>
          <p class="header__firstitem__text">报表(个)</p>
        </div>
      </div>
      <div class="header__seconditem">
        <img class="header__firstitem__img" src="../asset/images/unit.svg" alt="" />
        <div>
          <p class="header__firstitem__num">{{ trgCount }}</p>
          <p class="header__firstitem__text">业务单元</p>
        </div>
      </div>
      <div class="header__thirditem">
        <img class="header__firstitem__img" src="../asset/images/total.svg" alt="" />
        <div>
          <p class="header__firstitem__num">{{ totalRecords }}</p>
          <p class="header__firstitem__text">总收集</p>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="content__btngroup">
        <div v-if="tabKey != 'timeltrate'" class="content__btngroup__select">
          业务单元：
          <Select style="width: 200px" size="small" placeholder="请选择" v-model="selectContent">
            <Option  @click.native="changetrgNode(item)" v-for="item in unitList" :value="item.trgNode" :key="item.key">{{ item.trgNode }}</Option>
          </Select>
        </div>
        <button class="content__btngroup__btn" :class="{'btn__active':active == 'week'}" @click="weekData">近7天</button>
        <button class="content__btngroup__btn" :class="{'btn__active':active == 'month'}" @click="monthData">本月</button>
        <button class="content__btngroup__btn" :class="{'btn__active':active == 'total'}" @click="totalData">全部</button>
      </div>
      <Tabs class="content__tab" @on-click="gettabKey">
        <TabPane class="content__tab__timeltrate" name="timeltrate" label="填报及时率">
          <div class="timeltrate__header" v-if="cardList.length!= 0">
              <div class="timeltrate__header__leftarrow" @click="scrollLeft">
                <i class="el-icon-arrow-left"></i>
              </div>
              <div class="timeltrate__header__cardbox" id="cardBox">
                <div class="timeltrate__header__cardlist" id="cardList">
                  <div
                    class="card"
                    tabindex="1"
                    :class="{ 'card__active': handelCardName == item.name }"
                    v-for="item in cardList"
                    :key="item.name"
                    @click="getClick(item.name)"
                  >
                    <div class="card__text">
                      <div class="card__text__title">{{ item.name == 'total' ? '全部' : item.name }}</div>
                      <div class="card__randchart">
                        <div class="card__randchart__left">
                          <p class="randchart__left__title">及时率</p>
                          <p class="randchart__left__rate">{{ item.percent }}</p>
                        </div>
                        <div class="card__randchart__rightchart" style="width: 72px; height: 72px">
                          <pieChart :timelyData="item"></pieChart>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="timeltrate__header__rightarrow" @click="scrollRight">
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>
            <div class="timeltrate__content">
              <timelyRateChart
                style="height: 288px;top: -23px;"
                :dateFlags="this.dateFlags"
                :handelCardName="handelCardName"
              ></timelyRateChart>
            </div>
        </TabPane>
        <TabPane class="content__tab__unsubmitnum" name="unsubmitnum" label="未按时提交次数">
          <div class="unsubmitnum__content">
            <div class="unsubmitnum__content__left">
              <unsubmitnumChart
                :columorData="this.submitStatVosData"
                :selectTime="this.dateFlags"
                type="unsubmitnum"
              ></unsubmitnumChart>
            </div>
            <div class="unsubmitnum__content__right" v-show="this.IsshowRank">
              <div class="content__right__title">排名</div>
              <ul>
                <li v-for="(item,index) in sortrankList" :key="item.index">
                  
                  <span class="circle">{{ index+1}}</span>
                  <span class="unitName">{{ item.Bsname }}</span>
                  <span>{{ item.value }}</span>
                </li>
              </ul>
            </div>
          </div>
        </TabPane>
        <TabPane class="content__tab__rejectnum" name="rejectnum" label="被驳回次数">
          <div class="rejectnum__content">
            <div class="rejectnum__content__left">
              <unsubmitnumChart
                :columorData="this.submitStatVosData"
                :selectTime="this.dateFlags"
                type="rejectnum"
              ></unsubmitnumChart>
            </div>
            <div class="rejectnum__content__right" v-show="this.IsshowRank">
              <div class="content__right__title">排名</div>
              <ul>
                <li v-for="(item,index) in sortrankList" :key="item.index">
                  <span class="circle">{{ index+1 }}</span>
                  <span class="unitName">{{ item.Bsname }}</span>
                  <span>{{ item.value }}</span>
                </li>
              </ul>
            </div>
          </div>
        </TabPane>
      </Tabs>
    </div> -->
  </div>
</template>
<script>
//import timelyRateChart from '../components/homeEcharts/timelyRateChart.vue'
//import unsubmitnumChart from '../components/homeEcharts/unsubmitnumCharts.vue'
//import pieChart from '../components/homeEcharts/pieChart.vue'
import homeApi from '../api/home'
import { mapState } from 'vuex'
export default {
  name: 'home',
  //components: { timelyRateChart, unsubmitnumChart, pieChart },
  data() {
    return {
      homeimg: require('../asset/images/homeimg.png'),
      selectContent: '全部',
      dateFlags: '02',
      tabNum: '1',
      tabKey: 'timeltrate',
      signleCardWith: 200,
      currentClickNum: 0,
      reportCount: 0,
      totalRecords: 0,
      trgCount: 0,
      submitStatVosData:{},
      unitList: [],
      IsshowRank: false,
      BusinessList: [],
      pieData: [],
      active: 'month',
      // handelCardName: '全部',
      handelCardName: 'total',
      filterStatus:true,
      filterData: [],
      numbers: [],
      elementBusiness: '',
      SumsubmitCount: 0,
      SumrejectCount: 0,
      cardList: [
        { name: '业务单元1', percent: 80 },
        { name: '业务单元2', percent: 80 },
        { name: '业务单元3', percent: 80 },
        { name: '业务单元4', percent: 80 },
        { name: '业务单元5', percent: 80 },
        { name: '业务单元6', percent: 80 },
        { name: '业务单元7', percent: 80 },
        { name: '业务单元8', percent: 80 },
        { name: '业务单元9', percent: 80 },
        { name: '业务单元10', percent: 80 },
        { name: '业务单元11', percent: 80 }
      ],
      rankList: [],
      sortrankList: []
    }
  },
  watch:{
    handelCardName(val){
      this.cardList.forEach(item => {
          if(item.name == val){
            this.filterStatus = true
          } else {
            this.filterStatus = false
          }
        }
        )
    }
  },
  computed: {
    ...mapState(['buList'])
  },
  created() {
    if (!this.buList.length) {
      this.$store.dispatch('getBuUnit')
    }
  },
  methods: {
    weekData() {
      this.dateFlags = '01'
      this.active = 'week'
      this.getPieChartData()
    },
    monthData() {
      this.dateFlags = '02'
      this.active = 'month'
      this.getPieChartData()
    },
    totalData() {
      this.dateFlags = '04'
      this.active = 'total'
      this.getPieChartData()
    },
    getStatusticsData() {
      homeApi.getStatusticsData({}).then(res => {
        let obj = res.data.data[0]
        this.totalRecords = obj.totalRecords
        this.trgCount = obj.trgCount
        this.reportCount = obj.reportCount
      })
    },
    changetrgNode(){
       this.getPieChartData()
    },
    getPieChartData() {
      homeApi.getPieEchartsData({ dateFlag: this.dateFlags }).then(res => {
        let tabledata = res.data.data
        let pieStatTotalData = []
        // let timeChartData = res.data.data
        let timeChartData = res.data.data.filter(function (res) {
            return res.trgNode == 'statTotal'
          })
          let totalData = res.data.data.filter(function (res) {
            return res.trgNode == 'total'
          })

        //   pieStatTotalData = timeChartData[0].submitStatVos
        let result = {}
        this.cardList = []
        //过滤掉statTotal
         /* let tabledatas = tabledata.filter(function (res) {
            return res !== 'statTotal'
          })
        */
        let tabledatas = tabledata.filter(item=>item.trgNode !== 'statTotal')
        //处理将total赋值全部
        let data = []
        tabledatas.forEach(item => {
          if (item.trgNode == 'total') {
            item.trgNode = '全部'
          }
          data.push(item)
        })
        this.unitList = data
        //选中total 页面排序
        if (this.selectContent == '全部') {
          this.IsshowRank = true
          this.BusinessList = []
          this.submitStatVosData = this.unitList.find(item => item.trgNode === this.selectContent)
          this.unitList.forEach(element => {
            this.BusinessList.push(element.trgNode)
          })
          //过滤掉total
          var newBusinessList = this.BusinessList.filter(function (res) {
            return res !== '全部'
          })
          this.BusinessList = newBusinessList
          this.numbers = []

          //查找业务单元对应的未提交数
          this.BusinessList.forEach(element => {
            this.SumsubmitCount = 0
            this.SumrejectCount = 0
            //this.elementBusiness= element
            let datas = this.unitList.find(item => item.trgNode === element).submitStatVos

            datas.forEach(element => {
              if (element.noSubmitCount == null || element.rejectCount == null) {
                element.noSubmitCount = 0
                element.rejectCount = 0
              }
              //计算相应业务单元和
              this.SumsubmitCount += Number(element.noSubmitCount)
              this.SumrejectCount += Number(element.rejectCount)
            })
            //将计算的和放入数组中
            this.tabKey == 'unsubmitnum'
              ? this.numbers.push(this.SumsubmitCount)
              : this.numbers.push(this.SumrejectCount)
          })
          //合并两个数组
          this.rankList = this.BusinessList.map((Bsname, i) => ({ Bsname, value: this.numbers[i] }))
          //对象排序
          this.sortrankList = this.rankList.sort(this.compare('value', false))
        } else {
          this.IsshowRank = false
          this.submitStatVosData = this.unitList.find(item => item.trgNode === this.selectContent)
        }

        //填报及时率数据
        let countPercent = 0
        if(timeChartData[0].submitStatVos.length != 0){
          timeChartData[0].submitStatVos.forEach(item => {
          countPercent += Number(item.avgSubmitRoit)
        })
        this.cardList = []
        let avgPercent = (countPercent/totalData[0].submitStatVos.length).toFixed(2)
        
        let totalObj = {}
        totalObj['trgNode'] = 'total'
        totalObj['avgSubmitRoit'] = avgPercent 
        timeChartData[0].submitStatVos.unshift(totalObj)
        timeChartData[0].submitStatVos.forEach(item => {
          let unitObj = {}
          unitObj['name'] = item.trgNode
          unitObj['percent'] =Number(item.avgSubmitRoit) == 0 ? '-' :  parseInt((Number(item.avgSubmitRoit))*100)  + '%' 
          let pieData = []
          let timeData = {}
          timeData['name'] = '及时率'
          timeData['value'] = Number(item.avgSubmitRoit)
          pieData.push(timeData)
          let untimeData = {}
          untimeData['name'] = '不及时率'
          untimeData['value'] =Number((( 1 - Number(item.avgSubmitRoit)).toFixed(2)))
          pieData.push(untimeData)
          unitObj['data'] = pieData
          this.cardList.push(unitObj)
        })
        }
        // timeChartData.forEach(item =>{
        // })
        // let trgNodes = timeChartData.map(item => {
        //   if (item.submitStatVos && item.submitStatVos.length > 0) {
        //     let avgSubmitRoit = item.submitStatVos[item.submitStatVos.length - 1].avgSubmitRoit
        //     let obj = {}
        //     obj['name'] = item.trgNode
        //     obj['percent'] =Number(avgSubmitRoit) == 0 ? '-' :  parseInt((Number(avgSubmitRoit))*100)  + '%'
        //     // obj['percent'] = ((Number(avgSubmitRoit))* 100).toFixed(2)  + '%'
        //     let pieData = []
        //     let timeData = {}
        //     timeData['name'] = '及时率'
        //     timeData['value'] = Number(avgSubmitRoit)
        //     pieData.push(timeData)
        //     let untimeData = {}
        //     untimeData['name'] = '不及时率'
        //     untimeData['value'] =Number((( 1 - Number(avgSubmitRoit)).toFixed(2)))
        //     pieData.push(untimeData)
        //     obj['data'] = pieData
        //     this.cardList.push(obj)
        //     // result[item.trgNode == 'total' ? '全部' : item.trgNode] = Number(avgSubmitRoit).toFixed(2)
        //   }
        // })
      })
    },
    //对象排序
    compare(key, desc) {
      //key:  用于排序的数组的key值
      //desc： 布尔值，为true是升序排序，false是降序排序
      return function (a, b) {
        let value1 = a[key]
        let value2 = b[key]
        if (desc == true) {
          // 升序排列
          return value1 - value2
        } else {
          // 降序排列
          return value2 - value1
        }
      }
    },
    gettabKey(name) {
      this.tabKey = name
      this.getPieChartData()
    },
    getClick(name) {
      this.handelCardName = name
    },
    scrollLeft() {
      const allLength = this.cardList.length * 300
      const cardBoxWidth = document.getElementById('cardBox').clientWidth
      const cardList = document.getElementById('cardList')
      if (allLength < cardBoxWidth) return
      const leftMove = Math.abs(parseInt(window.getComputedStyle(cardList, null)?.left))
      if (leftMove + cardBoxWidth - 250 < cardBoxWidth) {
        // 到最开始的时候
        cardList.style.left = '0px'
      } else {
        cardList.style.left = '-' + (leftMove - 250) + 'px'
      }
    },
    scrollRight() {
      const allLength = this.cardList.length * 280
      const cardBoxWidth = document.getElementById('cardBox').clientWidth
      const cardList = document.getElementById('cardList')
      if (allLength < cardBoxWidth) return
      const leftMove = Math.abs(parseInt(window.getComputedStyle(cardList, null)?.left))
      if (leftMove + cardBoxWidth + 250 > allLength) {
        cardList.style.left = '-' + (allLength - cardBoxWidth) + 'px'
      } else {
        cardList.style.left = '-' + (leftMove + 250) + 'px'
      }
    }
  }
}
</script>
<style lang="less" scoped>
#homePage {
}
.header {
  display: flex;
  margin-top: 16px;

  .header__firstitem,
  .header__seconditem,
  .header__thirditem {
    display: flex;
    border: 2px solid #f4f6fd;
    width: 31%;
    height: 144px;
    margin-left: 16px;
    padding: 24px 0 24px 40px;
  }
  .header__firstitem {
    &__img {
      margin-right: 16px;
    }
    &__num {
      font-family: Avenir-Heavy;
      font-size: 36px;
      color: #12151b;
      font-weight: 800;
    }
    &__text {
      font-family: PingFangSC-Regular;
      font-size: 16px;
      color: #858b9c;
      font-weight: 400;
    }
  }
  .header__seconditem {
    &__img {
      // border-radius: 50%;
      // background: rgb(255, 221, 0);
      display: inline-block; //标签为Img时删除
      vertical-align: middle;
      width: 90px;
      height: 90px;
    }
    &__text {
      font-size: 30px;
      font-weight: 600px;
      margin-left: 20px;
      margin-right: 20px;
    }
    &__num {
      font-size: 40px;
      font-weight: 600px;
    }
  }
  .header__thirditem {
    &__text {
      font-size: 30px;
      font-weight: 600px;
      margin-left: 20px;
      margin-right: 60px;
    }
    &__num {
      font-size: 40px;
      font-weight: 600px;
    }
  }
}
.content {
  margin-top: 16px;
  width: 100%;
  height: 60%;
  // border: 2px solid rgb(0, 238, 255);
  position: relative;
  .content__btngroup {
    top: 6px;
    height: 34px;
    position: absolute;
    right: 20px;

    display: flex;
    z-index: 99999;
  }
  &__btngroup__btn {
    background: white;
    border: 0px;
    margin-left: 13px;
  }
  .btn__active {
    color: #ff6f4b;
  }
  .content__tab {
    .timeltrate__header {
      display: flex;
      width: 100%;
      height: 154px;
      .timeltrate__header__leftarrow,
      .timeltrate__header__rightarrow {
        text-align: center;
        width: 5%;
        font-size: 12px;
        cursor: default;
        height: 100%;
        i {
          margin-top: 100%;
        }
      }
      .timeltrate__header__cardbox {
        width: 90%;
        overflow: hidden;
        // height: 100px;
      }
      .timeltrate__header__cardlist {
        height: 124px;
        display: flex;
        transform: all 2s;
        position: relative;
        left: 0;
        transition: left 1s;
        // overflow-x: auto;
        // width: 90%;
        // display: -webkit-box;
        // -webkit-overflow-scrolling: touch;
      }
      .card {
        margin-right: 51px;
        padding-top: 16px;
        min-width: 174px;
        display: flex;
        margin-left: 32px;
        opacity: 1;
        cursor: default;
        // display: flex;
        // height: 100px;

        // width: 300px;
        // padding: 15px;
        // margin-left: 20px;
        // border: 3px solid blue;
      }
      .card__active {
        border-bottom: 3px solid #5b8ff9 !important;
        margin-bottom: -14px;

        .card__text {
          font-family: PingFangSC-Medium;
          font-size: 16px;
          color: #5b8ff9;
          text-align: left;
          line-height: 24px;
          font-weight: 500;
        }
        .randchart__left__rate {
          // color: rgba(0, 0, 0, 0.85);
          color: red;
          font-weight: 600;
        }
      }
      .card__text {
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.65);
        text-align: left;
        line-height: 24px;
        font-weight: 400;
        .card__text__title {
          white-space: nowrap;
        }
        .card__randchart {
          display: flex;

          &__left {
            margin-right: 32px;
            margin-top: 16px;
            .randchart__left__title {
              white-space: nowrap;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: rgba(0, 0, 0, 0.45);
              text-align: left;
              line-height: 22px;
              font-weight: 400;
            }
            .randchart__left__rate {
              font-family: HelveticaNeue;
              font-size: 24px;
              color: rgba(0, 0, 0, 0.45);
              text-align: left;
              line-height: 32px;
              font-weight: 400;
            }
          }
          &__rightchart {
            margin-top: 8px;
          }
        }
      }
    }
    .timeltrate__header__cardlist::-webkit-scrollbar {
      display: none;
    }
    .timeltrate__content {
      height: 100%;
    }
  }
  .content__tab__unsubmitnum {
    .unsubmitnum__content {
      width: 100%;
      display: flex;

      &__left {
        width: 75%;
        height: 300px;
      }
      &__right {
        width: 25%;
        padding: 20px;
        .content__right__title {
        }
        ul {
          height: 250px;
          overflow-y: scroll;
          margin-top: 10px;

          li {
            list-style: none;
            margin-top: 10px;
            display: flex;
            .circle {
              height: 25px;
              width: 25px;
              text-align: center;
              line-height: 25px;
              border-radius: 50%;
              background: #f0f2f5;
              color: #6b6b6b;
              display: inline-block;
            }
            .unitName {
              margin: 0 10px 0 15px;
            }
          }
          li:nth-child(-n + 3) {
            .circle {
              color: #ffffff;
              background: #31455a;
            }
          }
        }
      }
    }
  }
  .content__tab__rejectnum {
    .rejectnum__content {
      width: 100%;
      display: flex;

      &__left {
        width: 75%;
        height: 300px;
      }
      &__right {
        width: 25%;
        padding: 20px;
        .content__right__title {
        }
        ul {
          height: 250px;
          overflow-y: scroll;
          margin-top: 10px;

          li {
            list-style: none;
            margin-top: 10px;
            display: flex;
            .circle {
              height: 25px;
              width: 25px;
              text-align: center;
              line-height: 25px;
              border-radius: 50%;
              background: #f0f2f5;
              color: #6b6b6b;
              display: inline-block;
            }
            .unitName {
              margin: 0 10px 0 15px;
            }
          }
          li:nth-child(-n + 3) {
            .circle {
              color: #ffffff;
              background: #31455a;
            }
          }
        }
      }
    }
  }
}
/deep/.ivu-tabs-nav .ivu-tabs-tab:hover {
  color: #ff6f4b;
}
/deep/.ivu-tabs-nav .ivu-tabs-tab-active {
  color: #ff6f4b;
}
/deep/.ivu-tabs-nav .ivu-tabs-tab:hover {
  color: #ff6f4b;
}
/deep/.ivu-tabs-ink-bar {
  background-color: #ff6f4b;
} 
.homeimg {
  width: 100%;
  height: 100%;
  background-size: 99% 99%;
  background-image: url(../asset/images/imgHome1.jpg);
  position: relative;
  background-repeat: no-repeat;
  .home-title {
    font-family: AlibabaPuHuiTi_2_85_Bold;
    font-size: 56px;
    color: #111A34;
    font-weight: 700;
    position: absolute;
    top: 30%;
    left: 9%;
  }
}
</style>
